<template>
  <view class="spelling-training-game">
    <!-- 游戏主区域 -->
    <view class="game-container">
      <!-- 题目类型提示 -->
      <view class="question-type">
        <text class="type-badge">单词拼写</text>
      </view>

      <!-- 单词提示区域 -->
      <view class="word-hint-area">
        <!-- 中文提示 -->
        <view v-if="showChinese||showPhonetic" class="chinese-hint">
          <text v-if="showChinese" class="hint-text">{{ currentWord.wordMeaning }}</text>
          <text v-if="showPhonetic" class="phonetic-text">英
            <text>{{ currentWord.phoneticBr }}</text>
            / 美
            <text>{{ currentWord.phoneticAm }}</text>
          </text>
        </view>
      </view>

      <!-- 拼写区域 -->
      <view class="spelling-area">
        <text class="area-title">拼写结果：</text>
        <view class="spelling-display">
          <view
              v-for="(letter, index) in userSpelling"
              :key="index"
              class="letter-slot"
              :class="getLetterSlotClass(index)"
          >
            <text class="letter-text">{{ letter }}</text>
            <text class="slot-number">{{ index + 1 }}</text>
          </view>
          <view
              v-for="index in remainingSlots"
              :key="'empty_' + index"
              class="letter-slot empty"
          >
            <text class="letter-text">_</text>
            <text class="slot-number">{{ userSpelling.length + index }}</text>
          </view>
        </view>
      </view>

      <!-- 虚拟键盘 -->
      <view class="virtual-keyboard">
        <text class="keyboard-title">虚拟键盘：</text>
        <view class="keyboard-rows">
          <!-- 第一行：A-G -->
          <view class="keyboard-row">
            <view
                v-for="letter in keyboardRows[0]"
                :key="letter"
                class="keyboard-key"
                :class="getKeyClass(letter)"
                @click="pressKey(letter)"
            >
              <text class="key-text">{{ letter }}</text>
            </view>
          </view>
          <!-- 第二行：H-N -->
          <view class="keyboard-row">
            <view
                v-for="letter in keyboardRows[1]"
                :key="letter"
                class="keyboard-key"
                :class="getKeyClass(letter)"
                @click="pressKey(letter)"
            >
              <text class="key-text">{{ letter }}</text>
            </view>
          </view>
          <!-- 第三行：O-U -->
          <view class="keyboard-row">
            <view
                v-for="letter in keyboardRows[2]"
                :key="letter"
                class="keyboard-key"
                :class="getKeyClass(letter)"
                @click="pressKey(letter)"
            >
              <text class="key-text">{{ letter }}</text>
            </view>
          </view>
          <!-- 第四行：V-Z + 功能键 -->
          <view class="keyboard-row">
            <view
                v-for="letter in keyboardRows[3]"
                :key="letter"
                class="keyboard-key"
                :class="getKeyClass(letter)"
                @click="pressKey(letter)"
            >
              <text class="key-text">
                {{
                  letter === 'BACKSPACE' ? '⌫' :
                      letter === 'ENTER' ? '✓' :
                          letter === 'SPACE' ? '空格' : letter
                }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 提示控制按钮 -->
      <view class="hint-controls">
        <button class="hint-toggle-btn" @click="toggleChinese">
          <text class="btn-text">{{ showChinese ? '隐藏中文' : '显示中文' }}</text>
        </button>
        <button class="hint-toggle-btn" @click="togglePhonetic">
          <text class="btn-text">{{ showPhonetic ? '隐藏音标' : '显示音标' }}</text>
        </button>
        <button class="hint-toggle-btn" @click="toggleShowLetter">
          <text class="btn-text">{{ showLetter ? '隐藏字母提示' : '显示字母提示' }}</text>
        </button>
        <button class="hint-toggle-btn" @click="changeKeyBoard">
          <text class="btn-text">切换键盘</text>
        </button>
      </view>

      <!-- 字母提示区域 -->
      <view v-if="showLetter" class="letter-hints">
        <text class="hints-title">字母提示：</text>
        <view class="hints-container">
          <view
              v-for="(hint, index) in letterHints"
              :key="index"
              class="letter-hint"
              :class="{ used: hint.used }"
          >
            <text class="hint-letter">{{ hint.letter }}</text>
            <text class="hint-count">{{ hint.count }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 游戏头部信息 -->
    <view class="game-header">
      <view class="score-info">
        <text class="score-label">分数</text>
        <text class="score-value">{{ score }}</text>
      </view>
      <view class="progress-info">
        <text class="progress-label">进度</text>
        <text class="progress-value">{{ currentQuestion }}/{{ totalQuestions }}</text>
      </view>
      <view class="error-info">
        <text class="error-label">错误</text>
        <text class="error-value">{{ errors }}/{{ maxErrors }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button
          class="action-btn submit-btn"
          :disabled="!canSubmit || showResult"
          @click="submitAnswer"
      >
        <text class="btn-text">提交答案</text>
      </button>

      <button
          class="action-btn clear-btn"
          @click="clearSpelling"
          :disabled="userSpelling.length === 0"
      >
        <text class="btn-text">清空重写</text>
      </button>

      <button
          class="action-btn hint-btn"
          @click="showHint"
          :disabled="showResult || hintsAvailable <= 0"
      >
        <text class="btn-text">提示 ({{ hintsAvailable }})</text>
      </button>

      <button
          class="action-btn next-btn"
          v-if="showResult"
          @click="nextQuestion"
      >
        <text class="btn-text">下一题</text>
      </button>
    </view>

    <!-- 结果反馈 -->
    <view v-if="showResult" class="result-feedback" :class="isAnswerCorrect ? 'correct' : 'wrong'">
      <text class="feedback-icon">{{ isAnswerCorrect ? '🎉' : '😔' }}</text>
      <text class="feedback-text">{{ isAnswerCorrect ? '拼写正确！' : '拼写错误！' }}</text>
      <text class="feedback-detail">
        正确答案：
        <text class="correct-word">{{ currentWord.fullSpell || currentWord.wordFullSpell }}</text>
      </text>
      <text class="feedback-score" v-if="isAnswerCorrect">+{{ currentScore }}分</text>
    </view>

    <!-- Toast提示 -->
    <view v-if="showToast" class="toast-container" :class="toastType">
      <view class="toast-content">
        <text class="toast-icon">{{ toastIcon }}</text>
        <text class="toast-text">{{ toastMessage }}</text>
      </view>
    </view>

    <!-- 游戏结束弹窗 -->
    <view v-if="showGameOver" class="game-over-modal">
      <view class="modal-content">
        <text class="modal-title">{{ gameResult === 'win' ? '🎊 恭喜完成！' : '💔 游戏结束' }}</text>

        <view class="modal-stats">
          <view class="stat-item">
            <text class="stat-label">最终得分</text>
            <text class="stat-value">{{ score }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">正确题数</text>
            <text class="stat-value">{{ correctCount }}/{{ totalQuestions }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">准确率</text>
            <text class="stat-value">{{ accuracy }}%</text>
          </view>
        </view>

        <view class="modal-actions">
          <button class="modal-btn restart-btn" @click="restartGame">
            <text>再玩一次</text>
          </button>
          <button class="modal-btn exit-btn" @click="exitGame">
            <text>退出</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getWordListByCourseId} from "../../../api/wordSystemCourse";
import AudioCacheUtil from "../../../utils/AudioCacheUtil";

export default {
  name: "SpellingTrainingGame",
  props: {
    wordData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 游戏状态
      score: 0,
      currentQuestion: 1,
      totalQuestions: 0,
      errors: 0,
      maxErrors: 0,
      correctCount: 0,
      showResult: false,
      isAnswerCorrect: false,
      showGameOver: false,
      gameResult: '',

      // 提示显示控制
      showChinese: true,
      showPhonetic: true,
      showLetter: true,
      keyBoardChange: false,

      // 提示系统
      hintsAvailable: 3,
      currentScore: 0,

      // Toast提示
      showToast: false,
      toastType: '',
      toastMessage: '',
      toastIcon: '',
      toastTimer: null,

      // 当前单词数据
      currentWord: {},
      userSpelling: [], // 用户拼写的字母数组
      correctSpelling: '', // 正确拼写
      letterHints: [], // 字母提示

      // 虚拟键盘布局
      keyboardRows: [
        ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
        ['J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R'],
        ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        ['SPACE', 'BACKSPACE', 'ENTER']
      ],

      // 所有单词数据
      allWords: [],
      usedWords: new Set()
    };
  },

  computed: {
    // 是否可以提交答案
    canSubmit() {
      return this.userSpelling.length > 0;
    },

    // 剩余空格数量
    remainingSlots() {
      const maxLength = this.correctSpelling.length;
      return Math.max(0, maxLength - this.userSpelling.length);
    },

    // 准确率
    accuracy() {
      return this.totalQuestions > 0 ? Math.round((this.correctCount / this.totalQuestions) * 100) : 0;
    }
  },

  onLoad() {
    this.initGame();
  },

  onUnload() {
    if (this.toastTimer) {
      clearTimeout(this.toastTimer);
    }
  },

  methods: {
    // 初始化游戏
    async initGame() {
      await this.loadData();
      this.extractAllWords();
      this.generateNewQuestion();
    },

    async loadData() {
      this.wordData = await getWordListByCourseId({courseId: this.$route.query.courseId})
      this.wordData.forEach(item => {
        if (item.fullSpell) {
          // 将单词处理干净 只允许存在字母 如果是短语 短语间的空格只能是一个英文空格
          item.fullSpell = item.fullSpell.replace(/[^a-zA-Z\s]/g, '').trim().replace(/\s+/g, ' ');
        } else if (item.wordFullSpell) {
          item.wordFullSpell = item.wordFullSpell.replace(/[^a-zA-Z\s]/g, '').trim().replace(/\s+/g, ' ');
        }
      })
      this.totalQuestions = this.wordData.length
      this.maxErrors = Math.ceil(this.totalQuestions / 5)
    },

    // 提取所有单词
    extractAllWords() {
      this.allWords = this.wordData.map(word => ({
        phoneticAm: word.phoneticAm,
        phoneticBr: word.phoneticBr,
        wordMeaning: word.wordMeaning,
        fullSpell: word.fullSpell || word.wordFullSpell
      }));

      console.log('提取到的单词:', this.allWords);
    },

    // 生成新题目
    generateNewQuestion() {
      if (this.allWords.length === 0) {
        console.error('没有可用的单词数据');
        return;
      }

      // 随机选择未使用过的单词
      let availableWords = this.allWords.filter(word =>
          !this.usedWords.has(word.fullSpell)
      );

      if (availableWords.length === 0) {
        // 如果所有单词都已使用，重置使用记录
        this.usedWords.clear();
        availableWords = [...this.allWords];
      }

      const randomIndex = Math.floor(Math.random() * availableWords.length);
      const selectedWord = availableWords[randomIndex];
      this.usedWords.add(selectedWord.fullSpell);

      // 发音
      if (selectedWord) {
        AudioCacheUtil.play(selectedWord.wordMeaning, 'zh')

        setTimeout(() => {
          AudioCacheUtil.play(selectedWord.fullSpell || selectedWord.wordFullSpell, 'en')
        }, 3000)
      }

      this.currentWord = selectedWord;
      this.correctSpelling = selectedWord.fullSpell.toUpperCase();
      this.userSpelling = [];
      this.showResult = false;
      this.isAnswerCorrect = false;

      // 生成字母提示
      this.generateLetterHints();

      // 振动反馈
      uni.vibrateShort();
    },

    // 生成字母提示
    generateLetterHints() {
      const letters = this.correctSpelling.split('');
      const letterCounts = {};

      // 统计每个字母出现的次数
      letters.forEach(letter => {
        letterCounts[letter] = (letterCounts[letter] || 0) + 1;
      });

      // 转换为提示数组
      this.letterHints = Object.keys(letterCounts).map(letter => ({
        letter: letter,
        count: letterCounts[letter],
        used: 0
      })).sort((a, b) => a.letter.localeCompare(b.letter));
    },

    // 更新字母提示
    updateLetterHints() {
      const userLetters = this.userSpelling.reduce((counts, letter) => {
        counts[letter] = (counts[letter] || 0) + 1;
        return counts;
      }, {});

      this.letterHints.forEach(hint => {
        hint.used = userLetters[hint.letter] || 0;
      });
    },

    // 按下键盘键
    pressKey(key) {
      if (this.showResult) return;

      switch (key) {
        case 'BACKSPACE':
          this.backspace();
          break;
        case 'ENTER':
          this.submitAnswer();
          break;
        case 'SPACE':
          this.typeLetter(' '); // 空格键输入空格字符
          break;
        default:
          this.typeLetter(key);
          break;
      }
    },

    // 输入字母
    typeLetter(letter) {
      if (this.userSpelling.length >= this.correctSpelling.length) {
        this.showToastMessage('warning', '单词长度已满');
        return;
      }

      this.userSpelling.push(letter);
      this.updateLetterHints();
      uni.vibrateShort();
    },

    // 退格键
    backspace() {
      if (this.userSpelling.length > 0) {
        this.userSpelling.pop();
        this.updateLetterHints();
        uni.vibrateShort();
      }
    },

    // 清空拼写
    clearSpelling() {
      this.userSpelling = [];
      this.updateLetterHints();
    },

    // 获取字母槽样式类
    getLetterSlotClass(index) {
      if (!this.showResult) {
        return {'filled': true};
      }

      const userLetter = this.userSpelling[index];
      const correctLetter = this.correctSpelling[index];

      return {
        'correct': userLetter === correctLetter,
        'wrong': userLetter !== correctLetter,
        'show-result': this.showResult
      };
    },

    // 获取键盘键样式类
    getKeyClass(letter) {
      if (letter === 'BACKSPACE' || letter === 'ENTER' || letter === 'SPACE') {
        return {'function-key': true};
      }

      // 如果隐藏了字母提示，所有字母键都高亮显示
      if (!this.showLetter) {
        return {'available': true, 'always-highlight': true};
      }

      const usedCount = this.userSpelling.filter(l => l === letter).length;
      const totalCount = this.letterHints.find(h => h.letter === letter)?.count || 0;

      return {
        'used': usedCount >= totalCount,
        'available': usedCount < totalCount
      };
    },

    // 提交答案
    submitAnswer() {
      if (!this.canSubmit) return;

      this.showResult = true;
      const userAnswer = this.userSpelling.join('');

      this.isAnswerCorrect = userAnswer === this.correctSpelling;

      if (this.isAnswerCorrect) {
        this.currentScore = this.calculateScore();
        this.score += this.currentScore;
        this.correctCount++;
        uni.vibrateLong();
        this.showToastMessage('success', '拼写正确！');
      } else {
        this.errors++;
        this.showToastMessage('error', '拼写错误！');
      }

      // 2秒后自动下一题
      setTimeout(() => {
        this.autoNextQuestion();
      }, 2000);
    },

    // 计算得分
    calculateScore() {
      const baseScore = 10;
      const lengthBonus = Math.min(this.correctSpelling.length * 2, 10); // 长度奖励
      const hintPenalty = !this.showChinese ? 2 : 0 + !this.showPhonetic ? 3 : 0; // 提示隐藏奖励

      return baseScore + lengthBonus + hintPenalty;
    },

    // 显示提示
    showHint() {
      if (this.hintsAvailable <= 0 || this.showResult) return;

      this.hintsAvailable--;

      // 找到第一个错误的字母位置
      const wrongIndex = this.findWrongLetterIndex();
      if (wrongIndex !== -1) {
        const correctLetter = this.correctSpelling[wrongIndex];
        this.userSpelling[wrongIndex] = correctLetter;
        this.updateLetterHints();

        this.showToastMessage('info', `提示：第${wrongIndex + 1}个字母是 ${correctLetter}`);
      } else if (this.userSpelling.length < this.correctSpelling.length) {
        // 如果还没有错误，提示下一个字母
        const nextIndex = this.userSpelling.length;
        const correctLetter = this.correctSpelling[nextIndex];
        this.typeLetter(correctLetter);

        this.showToastMessage('info', `提示：下一个字母是 ${correctLetter}`);
      }
    },

    // 找到第一个错误的字母位置
    findWrongLetterIndex() {
      for (let i = 0; i < this.userSpelling.length; i++) {
        if (this.userSpelling[i] !== this.correctSpelling[i]) {
          return i;
        }
      }
      return -1;
    },

    // 切换中文显示
    toggleChinese() {
      this.showChinese = !this.showChinese;
    },

    // 切换音标显示
    togglePhonetic() {
      this.showPhonetic = !this.showPhonetic;
    },

    // 切换字母提示显示
    toggleShowLetter() {
      this.showLetter = !this.showLetter;
    },

    // 切换键盘
    changeKeyBoard() {
      if (!this.keyBoardChange) {
        // 切换为26键键盘
        this.keyboardRows = [
          ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
          ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
          ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
          ['SPACE', 'BACKSPACE', 'ENTER']
        ]
      } else {
        // 恢复为字母顺序键键盘
        this.keyboardRows = [
          ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
          ['H', 'I', 'J', 'K', 'L', 'M', 'N'],
          ['O', 'P', 'Q', 'R', 'S', 'T', 'U'],
          ['V', 'W', 'X', 'Y', 'Z', 'SPACE', 'BACKSPACE', 'ENTER']
        ]
      }
      this.keyBoardChange = !this.keyBoardChange;
    },

    // 显示Toast提示
    showToastMessage(type, message) {
      this.showToast = true;
      this.toastType = type;
      this.toastMessage = message;

      const iconMap = {
        'success': '🎉',
        'error': '😔',
        'warning': '⚠️',
        'info': '💡'
      };
      this.toastIcon = iconMap[type] || '💡';

      if (this.toastTimer) {
        clearTimeout(this.toastTimer);
      }

      this.toastTimer = setTimeout(() => {
        this.showToast = false;
      }, 2000);
    },

    // 自动下一题
    autoNextQuestion() {
      if (this.currentQuestion >= this.totalQuestions || this.errors >= this.maxErrors) {
        this.endGame();
      } else {
        this.nextQuestion();
      }
    },

    // 下一题
    nextQuestion() {
      if (this.currentQuestion >= this.totalQuestions || this.errors >= this.maxErrors) {
        this.endGame();
        return;
      }

      this.currentQuestion++;
      this.generateNewQuestion();
    },

    // 结束游戏
    endGame() {
      this.gameResult = this.errors < this.maxErrors ? 'win' : 'lose';
      this.showGameOver = true;
    },

    // 重新开始游戏
    restartGame() {
      this.score = 0;
      this.currentQuestion = 1;
      this.errors = 0;
      this.correctCount = 0;
      this.showGameOver = false;
      this.usedWords.clear();
      this.hintsAvailable = 3;
      this.showChinese = true;
      this.showPhonetic = true;
      this.initGame();
    },

    // 退出游戏
    exitGame() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.spelling-training-game {
  padding: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

/* 游戏头部 */
.game-header {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  backdrop-filter: blur(10px);
}

.score-info, .progress-info, .error-info {
  display: flex;
  gap: 8rpx;
}

.score-label, .progress-label, .error-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}

.score-value, .progress-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
}

.error-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #e74c3c;
}

/* 游戏容器 */
.game-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

/* 题目类型 */
.question-type {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  gap: 20rpx;
}

.type-badge {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
}

/* 单词提示区域 */
.word-hint-area {
  margin-bottom: 30rpx;
}

.chinese-hint, .phonetic-hint {
  background: #e9ecef;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  //border-left: 6rpx solid #3498db;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.hint-label {
  font-size: 26rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 8rpx;
}

.hint-text {
  font-size: 28rpx;
  color: #555;
}

.phonetic-text {
  font-size: 24rpx;
  color: #555;
  font-family: 'Arial', sans-serif;
}

.hint-controls {
  display: flex;
  gap: 16rpx;
  margin-top: 16rpx;
}

.hint-toggle-btn {
  flex: 1;
  padding: 0rpx;
  border: 2rpx solid #3498db;
  border-radius: 12rpx;
  background: transparent;
  color: #3498db;
  font-size: 24rpx;
}

.hint-toggle-btn:active {
  background: #3498db;
  color: white;
}

.btn-text {
  display: block;
}

/* 拼写区域 */
.spelling-area {
  margin-bottom: 30rpx;
}

.area-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 16rpx;
}

.spelling-display {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12rpx;
  min-height: 120rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 20rpx;
  align-items: center;
}

.letter-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border-radius: 12rpx;
  position: relative;
  animation: slotAppear 0.3s ease-out;
}

.letter-slot.empty {
  background: #e0e0e0;
  color: #bdc3c7;
}

.letter-slot.correct {
  background: linear-gradient(135deg, #27ae60, #229954);
}

.letter-slot.wrong {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.letter-text {
  font-size: 32rpx;
  font-weight: bold;
}

.slot-number {
  position: absolute;
  bottom: 4rpx;
  font-size: 18rpx;
  opacity: 0.8;
}

@keyframes slotAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 虚拟键盘 */
.virtual-keyboard {
  margin-bottom: 30rpx;
}

.keyboard-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 16rpx;
}

.keyboard-rows {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 8rpx;
}

/* 虚拟键盘键样式 */
.keyboard-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70rpx;
  height: 70rpx;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: bold;
}

.keyboard-key:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.keyboard-key.used {
  opacity: 0.4;
  cursor: not-allowed;
}

.keyboard-key.available {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-color: #3498db;
}

/* 添加常亮高亮样式 */
.keyboard-key.always-highlight {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  border-color: #4CAF50;
  color: white;
  box-shadow: 0 4rpx 8rpx rgba(76, 175, 80, 0.3);
}

.keyboard-key.always-highlight:active {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  transform: scale(0.95);
}

.keyboard-key.function-key {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border-color: #2980b9;
  width: 100rpx;
}

/* 空格键特殊样式 */
.keyboard-key.space-key {
  width: 150rpx;
  min-width: 150rpx;
}

.key-text {
  font-size: 28rpx;
  font-weight: bold;
}

/* 字母提示 */
.letter-hints {
  margin: 20rpx 0 0rpx 0;
}

.hints-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 12rpx;
}

.hints-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  justify-content: center;
}

.letter-hint {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  gap: 8rpx;
}

.letter-hint.used {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.hint-letter {
  font-size: 24rpx;
  font-weight: bold;
}

.hint-count {
  font-size: 20rpx;
  opacity: 0.8;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 16rpx;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  min-width: 200rpx;
  padding: 4rpx;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.submit-btn:not(:disabled):active {
  transform: scale(0.95);
}

.clear-btn {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
}

.hint-btn {
  background: linear-gradient(135deg, #f39c12, #d35400);
  color: white;
}

.next-btn {
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
}

/* 结果反馈 */
.result-feedback {
  padding: 24rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
  text-align: center;
  animation: slideInUp 0.5s ease-out;
}

.result-feedback.correct {
  background: linear-gradient(135deg, #d5f4e6, #a3e4c7);
  border: 2rpx solid #27ae60;
}

.result-feedback.wrong {
  background: linear-gradient(135deg, #fadbd8, #f5b7b1);
  border: 2rpx solid #e74c3c;
}

.feedback-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 12rpx;
}

.feedback-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 8rpx;
}

.feedback-detail {
  font-size: 24rpx;
  color: #7f8c8d;
  display: block;
  margin-bottom: 8rpx;
}

.correct-word {
  color: #27ae60;
  font-weight: bold;
}

.feedback-score {
  font-size: 28rpx;
  font-weight: bold;
  color: #3498db;
}

/* Toast提示 */
.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 30rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 20rpx;
  min-width: 300rpx;
  justify-content: center;
}

.toast-container.success .toast-content {
  border-left: 8rpx solid #27ae60;
  background: linear-gradient(135deg, #d5f4e6, #a3e4c7);
}

.toast-container.error .toast-content {
  border-left: 8rpx solid #e74c3c;
  background: linear-gradient(135deg, #fadbd8, #f5b7b1);
}

.toast-container.warning .toast-content {
  border-left: 8rpx solid #f39c12;
  background: linear-gradient(135deg, #fef5e7, #fdebd0);
}

.toast-container.info .toast-content {
  border-left: 8rpx solid #3498db;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.toast-icon {
  font-size: 48rpx;
  animation: bounce 0.5s ease-in-out;
}

.toast-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1.1);
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(30rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 游戏结束弹窗 */
.game-over-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  width: 80%;
  max-width: 600rpx;
}

.modal-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 40rpx;
  display: block;
}

.modal-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #3498db;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  padding: 20rpx;
  border: none;
  border-radius: 16rpx;
  color: white;
  font-size: 28rpx;
  width: 100%;
}

.restart-btn {
  background: #3498db;
}

.exit-btn {
  background: #95a5a6;
}

/* 响应式设计 */
@media (max-width: 750px) {
  .keyboard-key {
    width: 60rpx;
    height: 60rpx;
  }

  .keyboard-key.function-key {
    width: 80rpx;
  }

  .key-text {
    font-size: 24rpx;
  }

  .action-btn {
    min-width: auto;
  }

  .modal-actions {
    flex-direction: column;
  }
}
</style>
